<template>
	<view class="send-track-wrap">
		<map id="historyMap" class="map"   style="width: 100%;height: 100%;" :scale="17"
				:markers="markers" :latitude="latitude" :longitude="longitude" :polyline="polyline" @markertap="onMarkerClick">
		</map>
		<view class="car-input c-flex jc-start c-item-center">
			<view class="input-con c-flex jc-start c-item-center">
				<image src="@/static/images/notice/find-icon.png" style="width: 42rpx;max-height: 42rpx;"></image>
				<input class="uni-input" v-model="searchCarInfo" name="text" confirm-type="search" 
								placeholder="请输入车牌号" @confirm="onCarInputChange" @input="onCarInputChange"/>
			</view>
		</view>
		<view class="details" v-if="carInfo">
			<car-details :dataObj="carInfo" @onRefresh="onRefresh"></car-details>
		</view>
	</view>
</template>

<script>
	import CarDetails from './car-details.vue';
	import {formatDateStr} from '@/utils/utils.js';
	export default{
		components:{CarDetails},
		data(){
			return {
				remoteImgUrl: this.$API.IMG_URL + '/construct-supervision-mp/energy/',
				indicatorStyle: `height: 50px;line-height:50px;`,
				map:{},
				markers:[],
				carList:[],
				polyline:[],
				linePoints:[],
				latitude:'35.602195',
				longitude:'118.89116',
				detailsInfo:null,
				carInfo:null,
				searchCarInfo:'',
				currMarkerItem:'',
				tenantId:''
			}
		},
		onReady() {
			 this.map = uni.createMapContext('historyMap',this);
		},
		onLoad() {
			this.tenantId = uni.getStorageSync('tenantId');
			this.findCarList();
		},
		methods:{
			initTrack(id){
				uni.showLoading();
				const date = new Date();
				date.setHours(0);
				this.$API.findSendTrack({vehicleId:id,startTime:formatDateStr(date),
																endTime:formatDateStr(new Date())}).then(res=>{
					const arr = res.list;
					arr.forEach(point =>{
						let arr = [];
							arr.push({latitude: Number(point.latitude),longitude: Number(point.longitude)});
					});
					this.polyline = [];
					this.polyline.push({
							points: arr,
							color: '#6A63FF',
							color_copy: '#6A63FF',
							width: 4,
							arrowLine: true,
					});
				});	
			},
			
			findCarList(){
				this.$API.findCars({licensePlate:'',name:'',tenantId:this.tenantId}).then(res=>{
					this.clearCarMarker();
					this.carList = res.list;
					this.markers = [];
					this.carList.forEach(item=>{
						if(item.longitude && item.latitude){
							item['gps'] = item.longitude+','+item.latitude;
							let icon = item.vehicleType == "2" ?'send-track-car.png':'send-track-car3.png';//
							const marker = this.addMarker(item,`${this.remoteImgUrl}${icon}`,item.vehicleType);
							this.markers.push(marker)
						}
					});
					if(this.markers && this.markers.length > 0){
						this.setMapCenter(this.markers[0])
					}
				});	
			},
			//查询车辆信息
			findCarInfo(id){
				this.$API.findCarInfo(id).then(res=>{
					this.carInfo = res.data;
					this.carInfo['id'] = id;
					if(this.currMarkerItem){
						this.currMarkerItem.longitude = Number(this.carInfo.longitude);
						this.currMarkerItem.latitude = Number(this.carInfo.latitude);
						this.longitude = this.currMarkerItem.longitude;
						this.latitude = this.currMarkerItem.latitude;
					}
				});
			},
			//清除车辆相关marker
			clearCarMarker(){
				this.carList.forEach(carItem =>{
					for(let i = 0;i<this.markers.length;i++){
						const markerItem = this.markers[i];
						if(carItem.id == markerItem.id){
							this.markers.splice(i,1);
							break;
						}
					}
				});
			},
			//创建地图标志物
			addMarker(item,icon,type){
				const gps = item.gps.split(',');
				const marker = {
					id:item.id,
					latitude: gps[1],
					longitude: gps[0],
					width:55,
					height:40,
					iconPath: icon,
					sourcePath:icon,
					type:type,
					callout:{content:type == '0'?item.name:item.licensePlate,color:'#333333',x:10,display:'ALWAYS',padding:8,borderWidth:1,
									textAlign:'center',borderColor:type == '0'?'#C96BFF':'#c59217',borderRadius:6,x:45,y:45}
				};
				return marker
			},
			onMarkerClick(e){
				console.log('onMarkerClick',e)
				const arr = this.markers.filter(item => {return item.id == e.markerId});
				if(arr && arr.length > 0){
					this.setMapCenter(arr[0])
				}
			},
			setMapCenter(item){
				if(this.currMarkerItem)	this.currMarkerItem.iconPath = this.currMarkerItem.sourcePath;
				this.currMarkerItem = item;
				if(this.currMarkerItem.type == '1'){
					this.currMarkerItem.iconPath = this.remoteImgUrl+'send-track-car4.png';
				}
				if(this.currMarkerItem.type == '2'){
					this.currMarkerItem.iconPath = this.remoteImgUrl+'send-track-car-2.png';
				}
				this.longitude = this.currMarkerItem.longitude;
				this.latitude = this.currMarkerItem.latitude;
				if(this.currMarkerItem.type == '1'||this.currMarkerItem.type == '2'){
					this.findCarInfo(this.currMarkerItem.id);
					this.initTrack(this.currMarkerItem.id);
				}
			},
			//搜索车辆查询
			onCarInputChange(){
				const arr = this.carList.filter(item=>{return item.licensePlate == this.searchCarInfo});
				if(arr.length>0){
					this.onMarkerClick({markerId:arr[0].id});
					console.log(arr[0]);
				}
			},
			//刷新轨迹
			onRefresh(){
				this.findCarInfo(this.currMarkerItem.id);
				this.initTrack(this.currMarkerItem.id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.send-track-wrap{
		width:100%;height:100vh;
		.sele-con{width:306rpx;height:80rpx;line-height:80rpx;text-align:center;background: #FFFFFF;border-radius: 20px;font-family: PingFangSC, PingFang SC;font-weight: 400;font-size: 13px;color: #5C666E;}
		.car-input{
			position:absolute;left:48rpx;right:48rpx;top:30rpx;border-radius: 40rpx;overflow:hidden;width:88%;
			.input-con{
				position: relative;width: 100%;
				height: 80rpx;line-height: 80rpx;padding-left: 18rpx;background: #ffffff;border-radius: 16rpx;font-size: 24rpx;
				.line{
					height: 40rpx;border: 2rpx solid #DEDEDE;position: absolute;right: 115rpx;
				}
				text{
					font-size: 28rpx;font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;color: #3E3E3E;line-height: 40rpx;position: absolute;right: 38rpx;
				}
			}
		}
		.arrow{
			width: 0;height: 0;border-top: 5px solid #8c8989; border-right: 4px solid transparent;border-left: 4px solid transparent;margin-left: 20rpx;
		}
		.details{
			position:absolute;left:20rpx;bottom:52rpx;background: #ffffff;width: 88%;border-radius: 15rpx;    padding: 22rpx 26rpx;
			image{width:80rpx;height:80rpx;}
		}
		.search-con{
			border-radius: 40rpx;overflow:hidden;margin: 0 40rpx;
			.input-con{
				position: relative;width: 100%;
				height: 80rpx;line-height: 80rpx;padding-left: 18rpx;background: #f5f5f5;border-radius: 16rpx;font-size: 24rpx;
				.line{
					height: 40rpx;border: 2rpx solid #DEDEDE;position: absolute;right: 115rpx;
				}
				text{
					font-size: 28rpx;font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;color: #3E3E3E;line-height: 40rpx;position: absolute;right: 38rpx;
				}
			}
			
		}
		
		/*修改提示文字的颜色*/
		input::-webkit-input-placeholder {color: #8B959F;}
		input:-moz-placeholder {color: #8B959F;}
		input::-moz-placeholder { color: #8B959F;}
		input:-ms-input-placeholder { color: #8B959F;}
	}
</style>